<template>
  <div class="comLineEcharts_container" v-if="!!data">
    <!-- ai量化echarts折线图 -->
			<div id="aiQuantizationEcharts"></div>
  </div>
  <van-empty v-else class="comLineEcharts_empty" />
</template>

<script>
import * as echarts from 'echarts/core';
import { GridComponent, TooltipComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

export default {
  name: "ComLineEcharts",
  props: {
    id: {
      type: String,
      default: "",
    },
    data: {
		type: Array,
		default: () => [],
    },
	time:{
		type: Array,
		default: () => [],
	}
  },
  data() {
		return {
			myChart: null,
			options: {
				tooltip: {
                    trigger: 'axis',
                    triggerOn: 'click',
                    formatter: (params) => {
                        if (params && params.length > 0) {
                            return `${this.formatDate(params[0].name)}: ${Number(params[0].value).toFixed(4)}`;
                        }
                        return '';
                    },
					backgroundColor: 'rgba(12, 21, 39, 0.8)', // 半透明深蓝色背景
                    borderColor: '#028df3', // 边框颜色
                    textStyle: {
                        color: '#FFFFFF' // 文字颜色
                    }
                },

				color: '#283449',
				xAxis: {
					type: 'category',
					boundaryGap: false,
					show: false,
					data: []
				},
				yAxis: {
					type: 'value',
					show: false,
					scale: true
				},
				series: [
					{
						symbol: 'none',
						data: [],
						type: 'line',
						areaStyle: {},
						lineStyle: {
							color: '#0086FF',
							width: 1, //设置曲线宽度
							type: 'solid'
						}
					}
				],
				grid:[{
					top:0,
					bottom:0,
					left:0,
					right:0,
				}]
			}
		}
	},
	mounted() {
			this.options.series[0].data = this.data
			this.options.xAxis.data = this.time
			this.echartsInit()
	},
	beforeDestroy() {
        if (this.myChart) {
            this.myChart.dispose();
            this.myChart = null;
        }
    },
	methods:{
		echartsInit() {
			echarts.use([GridComponent, LineChart, UniversalTransition, CanvasRenderer,TooltipComponent]);

			if(this.myChart){
				return
			}

			this.myChart = echarts.init(document.getElementById('aiQuantizationEcharts'));
			this.myChart.setOption(this.options);
		},

		formatDate(date) {
			const d = new Date(date);
			const month = `${d.getMonth() + 1}`.padStart(2, '0');
			const day = `${d.getDate()}`.padStart(2, '0');
			const year = d.getFullYear();
			return `${month}/${day}/${year}`;
		}
	},
	watch: {
		data(newVal) {
			if (newVal) {
				this.options.series[0].data = newVal;
				this.myChart.setOption(this.options);
			}
		},
		time(newVal) {
			if (newVal) {
				this.options.xAxis.data = newVal;
				this.myChart.setOption(this.options);
			}
		}
	}
};
</script>

<style scoped>
.comLineEcharts_container{
	width: 100%;
	height: 100%;
}
#aiQuantizationEcharts{
	width: 100%;
	height: 100%;
}
</style>